<template>
  <div class="back-button-container">
    <el-button type="primary" plain @click="handleBack" icon="Back" :loading="loading">
      {{ buttonText }}
    </el-button>
  </div>
</template>

<script setup name="BackButton" lang="ts">
interface Props {
  /** 按钮文本 */
  text?: string;
  /** 返回方式：'back' - 浏览器后退, 'route' - 路由跳转 */
  backType?: 'back' | 'route';
  /** 当backType为'route'时，跳转的路由路径 */
  routePath?: string;
  /** 是否显示加载状态 */
  loading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  text: '返回',
  backType: 'back',
  routePath: '',
  loading: false
});

const router = useRouter();

// 计算按钮文本
const buttonText = computed(() => props.text);

// 处理返回操作
const handleBack = () => {
  if (props.backType === 'route' && props.routePath) {
    router.push(props.routePath);
  } else {
    router.back();
  }
};
</script>

<style scoped>
.back-button-container {
  display: inline-block;
}
</style>